<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>
<body>
    <!-- 1. -->
     <!-- <table border="1" cellspacing="0" align="center" class="box">
        <tr>
            <th>编号</th>      
            <th>商品名称</th>
            <th>单价</th>
        </tr>
        <tr class="kk">
            <td >01</td>
            <td >牛仔外套</td>
            <td >99元</td>
        </tr>
        <tr class="kk2">
            <td >02</td>
            <td>帽子</td>
            <td>25元</td>
        </tr>
    </table> -->
    <!-- 2. -->
     <table  border="1" cellspacing="0" align="center" cellpadding="5px">
        <thead>
            <th>品名称商</th>      
            <th>价格</th>
            <th>数量</th>
        </thead>
        <tbody>
            <tr>
                <td >牛仔外套</td>
                <td >99元</td>
                <td >4</td>
            </tr>
            <tr>
                <td >帽子</td>
                <td>25元</td>
                <td>8</td>
            </tr>
        </tbody>
    </table> 
<!-- 方法一 -->
     <script>
        const tb =document.querySelector('tbody');
        tb.addEventListener('mouseover',function(evt){
            evt.target.parentNode.style.backgroundColor ="pink";    
        });
        tb.addEventListener('mouseout',function(evt){
           evt.target.parentNode.style.backgroundColor ="";
        });
    </script> 
<!-- 方法二 -->
     <!-- <script>
        const box =document.querySelector(".kk");
        box.addEventListener('mouseover',function(){
            box.style.backgroundColor ="aquamarine";
           
            
        });
        box.addEventListener('mouseout',function(){
            box.style.backgroundColor ="white";
        });

        const box2 =document.querySelector(".kk2");
        box2.addEventListener('mouseover',function(){
            box2.style.backgroundColor ="aquamarine";
            
        });
        box2.addEventListener('mouseout',function(){
            box2.style.backgroundColor ="white";
        });
    </script>  -->
    
</body>
</html>